<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            text-align: center;
            margin: 200px auto;
            width: 300px;
            height: 300px;
            background-color: aquamarine;
        }
        div img{
            display: block;
            width: 200px;
            height: 200px;
            margin: 20px auto;
        }
    </style>
    <script>
        window.onload = function (){
            var img = document.getElementById("img");
            var index = 0;
            var arry = ["./img-1.jpg","./img-2.jpg","./img-3.jpg","./img-4.jpg","./img-5.jpg"];
            var p = document.getElementById("p");
            var prev = document.getElementById("prev");
            prev.onclick = function(){
                if (index == 0){
                    index = arry.length-1;
                }else{
                    index--;
                }
                img.src = arry[index];
                p.innerHTML = "一共"+(arry.length)+"张图,这是第"+(index+1)+"张";
            };

            var next = document.getElementById("next");
            next.onclick = function(){
                if (index == arry.length-1){
                    index = 0;
                }else{
                    index++;
                }
                img.src = arry[index];
                p.innerHTML = "一共"+(arry.length)+"张图,这是第"+(index+1)+"张";
            };
        };
    </script>
</head>
<body>
    <div>
        <p id="p">一共5张图,这是第1张</p>
        <img src="./img-1.jpg" id="img">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>

    </div>
</body>
</html>